<template>
  <div class="app-container" v-if="formData">
    <div slot="footer" class="dialog-footer" style="margin:20px 20px 20px 20px">
      <el-button type="warning" @click="$router.go(-1)">返 回</el-button>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px" inline style="padding-right: 150px">
      <el-form-item style="width: 515px" label="活动名称：" prop="name">
        {{form.name}}
      </el-form-item>
      <el-form-item style="width: 800px" label="负责人姓名：" prop="responsibleName">
        {{form.responsibleName}}
      </el-form-item>
      <el-form-item style="width: 500px" label="活动地点：" prop="location">
        {{form.location}}
      </el-form-item>
      <el-form-item style="width: 500px" label="联系电话：" prop="phone">
        {{form.phone}}
      </el-form-item>
      <el-form-item style="width: 800px" label="企业名称：" prop="enterpriseId">
        {{name}}
      </el-form-item>
      <el-form-item style="width: 1500px" label="活动图片：" prop="imageUrl">
        <el-image
          style="height: 100px"
          :src="image"
        ></el-image>
      </el-form-item>
      <el-form-item label="开始时间：" prop="startTime">
        {{form.startTime}}
      </el-form-item>
      <el-form-item label="结束时间：" prop="endTime">
       {{form.endTime}}
      </el-form-item>

      <el-form-item style="width: 1500px" label="活动简介：">
        <div style="margin-top: -15px" v-html="form.introduction"></div>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import {
  listActivities,
  getActivities,
  delActivities,
  addActivities,
  updateActivities
} from '@/api/village/activities'
import { listEnterprise } from '@/api/village/enterprise'
import { listJobLog } from '@/api/monitor/jobLog'

export default {
  name: 'enterprisesDetalis',
  data() {
    return {
      options: [],
      image:'',
      // 保存从路由传递过来的数据对象
      id: null,
      // 保存图片的URL数组，初始值为空数组
      images: [],
      // 用于设置轮播图的高度
      carouselHeight: '500px',
      // 表单数据对象
      formData: null,
      queryParams:{},
      name:'',
      // 验证规则
      rules: {
        field106: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        field107: [
          { required: true, message: '请输入活动地点', trigger: 'blur' }
        ],
        field102: [
          { required: true, message: '请输入开始时间', trigger: 'blur' }
        ],
        field103: [
          { required: true, message: '请输入结束时间', trigger: 'blur' }
        ],
        field105: [
          { required: true, message: '请输入负责人姓名', trigger: 'blur' }
        ],
        field104: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        field108: [
          { required: true, message: '请输入活动简介', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    await this.getDetail()
    // console.log(this.formData)
    // this.getname(formData.enterpriseId)
  },
  methods: {

    async getname(id) {
      await listEnterprise(this.queryParams).then(response => {
        this.options = response.rows.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      })
      const name = this.options.filter(item => item.value !== id)
      this.name = name[0].label
    },
    // 其他方法可以在这里定义
    getDetail() {
      getActivities(this.$route.query.id).then(res => {
        this.form = res.data
        this.images = res.data.imageUrl.split(',').map(item => process.env.VUE_APP_BASE_API + item)
        this.image = this.images[0]
        this.formData = res.data
        this.getname(res.data.enterpriseId)
      })

    }
  }
}
</script>

<style scoped>
.app-container {
  width: 100%;
}

.image-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.menu {
  margin-top: 3vh;
}


</style>
<style>
.el-input.is-disabled .el-input__inner {
  color: #000000;
}

.el-textarea.is-disabled .el-textarea__inner {
  color: #000000;
}
</style>
